<template>
  
  <div style="width: 100%; height: 100%" class="test"> 
    <button @click="test">test</button> 
    <dv-chart-map  :register="register" :map="map"  debug @click="handleClick"></dv-chart-map>
  </div> 

    <!--  -->
</template>
<script setup lang="ts" >
import { ref } from 'vue';
import { DvChartMap } from '$comp/index';
import china from '$comp/assets/geo/china.json';
import anhui from '$comp/assets/geo/province/anhui.json';
import geoArray from '$comp/assets/geo/index.json'
// const breadcrumb = [
//   {
//     id: 'china',
//     name: 'China',
//     geo: 'china.json'
//   }
// ] 

const map = ref('china.json')

const fixRegister = ref(china)

const test = () => {
  map.value = 'anhui.json'
  fixRegister.value = anhui
}

const register = (instance) => {
  console.log(instance, 'instance-----')
  const _map = instance.proxy.map 
 
 
  return new Promise((resolve) => {
    const [path, file] = _map.split('/')
    console.log(file, 'file -------------------')
    if (!file) {
      import('$comp/assets/geo/china.json').then((res) => {
        resolve(res.default)
      })
    } else {
      if (path === 'province') {
        import('../../packages/assets/geo/province/' + file).then((res) => { 
          resolve(res.default)
        })
      } else {
        import('../../packages/assets/geo/city/' + file).then((res) => {
          resolve(res.default)
        })
      }
      // const _path = path === 'province' ? '$comp/assets/geo/province/' : '$comp/assets/geo/city/'
      // console.log(_path)
      
    }
  }) 
}



const handleClick = (params) => {
  if (params.componentType !== 'geo') return
  const name = params.name.replace('市', '')
  const geoItem = geoArray.find((item) => {
    return item.name === name
  })  
  if (geoItem) {
    map.value = geoItem.geo
    // register(geoItem.geo).then((res) => { 
    //   map.value = geoItem.geo
    //   fixRegister.value = res
    // })
  }
}


</script>
<style lang="scss" scoped>.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
   background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
